<template>
  <el-drawer
    v-model="props.drawerVisibility"
    :title="title"
    :size="size"
    :before-close="handleClose"
  >
    <el-descriptions title="用户信息" border>
      <el-descriptions-item label="用户名：">{{
        form.username
      }}</el-descriptions-item>
      <el-descriptions-item label="ID：">{{ form.id }}</el-descriptions-item>
      <el-descriptions-item label="昵称：">{{
        form.nickName
      }}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions border>
      <el-descriptions-item label="邮箱：">{{
        form.email
      }}</el-descriptions-item>
      <el-descriptions-item label="电话：">{{
        form.phone
      }}</el-descriptions-item>
      <el-descriptions-item label="性别：">{{ form.sex }}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions border>
      <el-descriptions-item label="创建时间：">{{
        form.createTime.replace("T", "&nbsp")
      }}</el-descriptions-item>
      <el-descriptions-item label="修改时间：">{{
        form.updateTime.replace("T", "&nbsp")
      }}</el-descriptions-item>
    </el-descriptions>
    <div class="image-box">
      <div>用户头像：</div>
        <el-image
          style="width: 100px; height: 100px"
          src=""
          :zoom-rate="1.2"
          :preview-src-list="[]"
          :initial-index="4"
          fit="cover"
        />

    </div>
  </el-drawer>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";

const props = defineProps({
  drawerVisibility: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "详细信息",
  },
  size: {
    type: String,
    default: "50%",
  },
  form: {
    type: Object,
    default: {},
  },
});

const direction = () => {};

const emits = defineEmits(["handleCloseEmit"]);

const handleClose = () => {
  // 判断是否有值进行关闭
  emits("handleCloseEmit", props.drawerVisibility);
};
</script>

<style scoped lang="scss">
el-row {
  margin-top: 1.2rem;
}
.image-box {
  display: flex;
  height: 100px;
  margin-top: 1.2rem;
}
</style>
